<script setup lang='ts' name="sales-order-edit">
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridListeners, VxePagerEvents, VxeTableInstance } from 'vxe-table'

import { CircleCheckFilled, CirclePlus, Download, Upload } from '@element-plus/icons-vue'
import { SearchForm, SearchTable } from '@fl/components'
import ButtonItem from '@fl/components/button-item.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const btns: any = [
    {
        label: '删除',
        text: true,
        value: 'delete',
    },
    {
        label: '复制',
        text: true,
        value: 'copy',
    },
]

const schema: PlusColumn[] = [
    {
        colProps: {
            span: 8,
        },
        label: '订单编号',
        prop: 'name',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 8,
        },
        label: '子订单编号',
        prop: 'name',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 8,
        },
        label: '供应商名称',
        prop: 'name',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 8,
        },
        fieldProps: () => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        endPlaceholder: '结束日期',
                        startPlaceholder: '开始日期',
                        type: 'datetimerange',
                    })
                }, 2000)
            })
        },
        label: '下单时间',
        prop: 'endTime',
        valueType: 'date-picker',
    },
] as const

const state = {
    name: '',
    qu: '',
    sheng: '',
    shi: '',
}

const form = ref({
    ...state,
})

function reset() {
    form.value = {
        ...state,
    }
    getData()
}

const gridOptions = reactive<any>({
    border: true,
    columns: [
        { field: 'module_name', title: '订单编号' },
        { field: 'module_name', title: '子订单编号' },
        { field: 'module_name', title: '订单名称' },
        { field: 'module_name', title: '供应商名称' },
        { field: 'module_name', title: '下单用户' },
        { field: 'module_name', title: '下单金额' },
        { field: 'a', title: '状态' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 350,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})

const showApproval = ref(false)
const showInfo = ref(false)

function doAction(item: any, row: any) {
    console.log('doAction', item.value)
    switch (item.value) {
        case 'send':
            console.log('立即发货', row)
            break
        case 'view':
            console.log('查看', row)
            router.push('/purchase-pages/purchase-order-management/edit-order-info')
            break
        case 'log':
            router.push('/purchase-pages/purchase-order-management/purchase-sales-order-log')
            break
        case 'approval':
            console.log('申请验收', row)
            showApproval.value = true
            break
        case 'detail':
            showInfo.value = true
            console.log('申请验收单明细', row)
            break
        default:
            break
    }
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    gridOptions.pagerConfig.currentPage = currentPage
    gridOptions.pagerConfig.pageSize = pageSize
    getData()
}

async function getData() {
    gridOptions.data = Array.from({ length: 5 }).fill(0).map((_, index) => {
        return {
            checked: index === 0,
            expand: index === 0,
            expands: index === 0 ? [{ id: 2 }, { id: 3 }] : [],
            id: index,
            label: _,
        }
    })
    // gridOptions.loading = true
    // getPrivileges({
    //     ...form.value,
    //     page: gridOptions.pagerConfig.currentPage,
    //     page_size: gridOptions.pagerConfig.pageSize,
    // }).then((res: any) => {
    //     gridOptions.pagerConfig.total = res.total ?? 0
    //     gridOptions.data = res?.items ?? []
    //     gridOptions.loading = false
    // })
}
getData()

function doSave() {
    goToList()
}
function goToList() {
    router.replace('/purchase-pages/purchase-order-management/purchase-sales-order')
}
</script>

<template>
    <ElCard mb-20
            class="top-32"
    >
        <SearchForm v-model="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="() => getData()"
                    @reset="reset"
        />
    </ElCard>

    <ElCard mb-20>
        <SearchTable v-bind="gridOptions"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="gridOptions.loading"
                     @page-change="handlePageChange"
        >
            <template #operate="{ row }">
                <ButtonItem :btns="btns"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </SearchTable>
    </ElCard>

    <el-card>
        <div style="text-align: center;">
            <el-button @click="goToList">
                取消
            </el-button>

            <el-button type="primary"
                       @click="doSave"
            >
                确认下单
            </el-button>
        </div>
    </el-card>
</template>

<style lang="less" scoped>
.top-32 {
    margin-top: -32px;
}
</style>
